<template>
	<view class="qrCode">
		<view class="top">
			<up-avatar class="avatar" :src="info.driverImage" size="60" @click="handleUpload"></up-avatar>
			<text class="btn-text" @click="driverOpenOrder">司机开单</text>
		</view>
		<view class="total">
			<view class="name">{{info.name || '--'}}</view>
			<view class="item">
				<text>工号 {{info.driverNo}}</text>
				<text style="margin: 0px 5px">|</text>
				<text>驾龄：{{ info.drivingExperience || 0 }}年</text>
			</view>
			<view class="tip">仅能邀请客户使用微信&支付宝扫码或者代叫员扫码给我下单</view>
		</view>
		<view class="qrCode">
			<u--image :showLoading="true" :src="`data:image/webp;base64,${qrCode}`" width="200px" height="200px"></u--image>
		</view>
	</view>
</template>

<script setup>
import { reactive } from 'vue';
import http from "@/request/index.js"
const info = reactive({});
const qrCode = ref('');

onMounted(() => {
	getQrCode();
	getUserInfo();
})

const getQrCode = async() => {
	let { code, msg, data } = await http('/app/driver/image/myQrCodeImage', {}, 'GET')
	if (code != 200) return
	// console.log(data)
	qrCode.value = data
}
const getUserInfo = async() => {
	let { code, msg, data } = await http('/app/driver/getDriverInfo', {}, 'GET')
	if (code != 200) return
	info = { ...data, driverImage: data.driverImage || './../../static/my-head-icon.png' }
}
const driverOpenOrder = () => {
	let a = getApp().globalData.longitude || ''
	let b = getApp().globalData.latitude || ''
	console.log(123123, getApp().globalData)
	uni.navigateTo({
		url: `/pages/webview/openOrder?driverNo=${info.driverNo}&lon=${a}&lat=${b}`
	})
}
</script>

<style lang="scss" scoped>
	.qrCode {
		.top {
			width: 100%;
			height: 100px;
			background-color: #3C9CFF;
			color: #fff;
			position: relative;
			margin-top: -1px;
			.avatar {
				position: absolute;
				width: 60px;
				height: 60px;
				border-radius: 50%;
				top: 65px;
				left: 50%;
				margin-left: -30px;
				z-index: 9;
				border: 4px solid #fff;
			}
			.btn-text {
				float: right;
				text-align: right;
				margin: 5px 20px;
				text-decoration: underline;
			}
		}
		.total {
			color: #333;
			margin-top: 40px;
			text-align: center;
			.name  {
				font-weight: bold;
				font-size: 18px;
				margin-bottom: 10px;
			}
			.tip {
				box-shadow: 0px 0px 5px 2px rgba(60,64,76,.2);
				width: 70%;
				margin: 15px auto;
				padding: 5px;
				font-size: 12px;
			}
		}
		.qrCode {
			border: 2px solid #000;
			width: 200px;
			height: 200px;
			margin: 5px auto;
		}
	}
</style>
